ரியாக்ட் போர்டல் நிகழ்வு கையாளுதலில் தேர்ச்சி: உலகளாவிய பயன்பாடுகளுக்கான DOM மரங்களுக்கிடையே நிகழ்வு ஒப்படைப்பு

வலை மேம்பாட்டின் பரந்த மற்றும் ஒன்றோடொன்று இணைக்கப்பட்ட உலகில், உலகளாவிய பார்வையாளர்களை ஈர்க்கும் உள்ளுணர்வு மற்றும் பதிலளிக்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவது மிக முக்கியமானது. ரியாக்ட், அதன் கூறு அடிப்படையிலான கட்டமைப்புடன், இதை அடைய சக்திவாய்ந்த கருவிகளை வழங்குகிறது. இவற்றில், ரியாக்ட் போர்டல்கள் தாய் கூறு படிநிலைக்கு வெளியே இருக்கும் ஒரு DOM முனையில் குழந்தைகளைக் காண்பிப்பதற்கான மிகவும் பயனுள்ள வழிமுறையாக தனித்து நிற்கின்றன. மோடல்கள், டூல்டிப்கள், டிராப்டவுன்கள் மற்றும் அறிவிப்புகள் போன்ற UI கூறுகளை உருவாக்குவதற்கு இந்த திறன் விலைமதிப்பற்றது, அவை அவற்றின் தாயின் ஸ்டைலிங் அல்லது `z-index` ஸ்டாக்கிங் சூழலின் கட்டுப்பாடுகளிலிருந்து விடுபட வேண்டும்.

போர்டல்கள் மகத்தான நெகிழ்வுத்தன்மையை வழங்கும் அதே வேளையில், அவை ஒரு தனித்துவமான சவாலை அறிமுகப்படுத்துகின்றன: நிகழ்வு கையாளுதல், குறிப்பாக ஆவண பொருள் மாதிரி (DOM) மரத்தின் வெவ்வேறு பகுதிகளைக் கடந்து செல்லும் தொடர்புகளைக் கையாளும்போது. ஒரு போர்டல் வழியாகக் காட்டப்படும் ஒரு உறுப்புடன் ஒரு பயனர் தொடர்பு கொள்ளும்போது, DOM வழியாக நிகழ்வின் பயணம் ரியாக்ட் கூறு மரத்தின் தருக்க அமைப்புடன் ஒத்துப்போகாமல் இருக்கலாம். இது சரியாகக் கையாளப்படாவிட்டால் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும். இதற்கான தீர்வு, நாம் ஆழமாக ஆராயவுள்ள ஒரு அடிப்படை வலை மேம்பாட்டுக் கருத்து: நிகழ்வு ஒப்படைப்பு (Event Delegation).

இந்த விரிவான வழிகாட்டி ரியாக்ட் போர்டல்களுடன் நிகழ்வு கையாளுதலைப் பற்றிய மர்மத்தை விலக்கும். நாங்கள் ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பின் நுணுக்கங்களை ஆராய்வோம், நிகழ்வு பப்ளிங் மற்றும் கேப்சரின் இயக்கவியலைப் புரிந்துகொள்வோம், மிக முக்கியமாக, உங்கள் பயன்பாடுகளுக்கு, அவற்றின் உலகளாவிய அணுகல் அல்லது அவற்றின் UI இன் சிக்கலைப் பொருட்படுத்தாமல், தடையற்ற மற்றும் கணிக்கக்கூடிய பயனர் அனுபவங்களை உறுதிப்படுத்த வலுவான நிகழ்வு ஒப்படைப்பை எவ்வாறு செயல்படுத்துவது என்பதைக் காண்பிப்போம்.

ரியாக்ட் போர்டல்களைப் புரிந்துகொள்ளுதல்: DOM படிநிலைகளுக்கு இடையே ஒரு பாலம்

நிகழ்வு கையாளுதலுக்குள் மூழ்குவதற்கு முன், ரியாக்ட் போர்டல்கள் என்றால் என்ன, நவீன வலை மேம்பாட்டில் அவை ஏன் மிகவும் முக்கியமானவை என்பதைப் பற்றிய நமது புரிதலை உறுதிப்படுத்துவோம். ஒரு ரியாக்ட் போர்டல் `ReactDOM.createPortal(child, container)` ஐப் பயன்படுத்தி உருவாக்கப்படுகிறது, இதில் `child` என்பது எந்தவொரு காண்பிக்கக்கூடிய ரியாக்ட் குழந்தை (எ.கா., ஒரு உறுப்பு, சரம் அல்லது துண்டு), மற்றும் `container` என்பது ஒரு DOM உறுப்பு ஆகும்.

உலகளாவிய UI/UX-க்கு ரியாக்ட் போர்டல்கள் ஏன் அவசியம்

மற்ற எல்லா உள்ளடக்கத்திற்கும் மேலாக தோன்ற வேண்டிய ஒரு மோடல் உரையாடலைக் கவனியுங்கள், அதன் தாய் கூறின் `z-index` அல்லது `overflow` பண்புகளைப் பொருட்படுத்தாமல். இந்த மோடல் ஒரு வழக்கமான குழந்தையாகக் காட்டப்பட்டால், அது `overflow: hidden` தாயால் வெட்டப்படலாம் அல்லது `z-index` முரண்பாடுகள் காரணமாக உடன்பிறப்பு உறுப்புகளுக்கு மேலே தோன்றுவதற்கு சிரமப்படலாம். போர்டல்கள் இதைத் தீர்க்கின்றன, மோடலை அதன் ரியாக்ட் தாய் கூறால் தர்க்கரீதியாக நிர்வகிக்க அனுமதிக்கிறது, ஆனால் உடல்ரீதியாக ஒரு நியமிக்கப்பட்ட DOM முனையில், பெரும்பாலும் document.body இன் குழந்தையாக நேரடியாகக் காட்டப்படுகிறது.

• கொள்கலன் கட்டுப்பாடுகளிலிருந்து தப்பித்தல்: போர்டல்கள் கூறுகளை அவற்றின் தாய் கொள்கலனின் காட்சி மற்றும் ஸ்டைலிங் கட்டுப்பாடுகளிலிருந்து "தப்பிக்க" அனுமதிக்கின்றன. இது குறிப்பாக ஓவர்லேக்கள், டிராப்டவுன்கள், டூல்டிப்கள் மற்றும் உரையாடல்களுக்குப் பயனுள்ளதாக இருக்கும், அவை வியூபோர்ட்டுடன் தொடர்புடையதாக அல்லது ஸ்டாக்கிங் சூழலின் உச்சியில் தங்களை நிலைநிறுத்த வேண்டும்.
• ரியாக்ட் சூழல் மற்றும் நிலையை பராமரித்தல்: ஒரு வித்தியாசமான DOM இருப்பிடத்தில் காட்டப்பட்டாலும், ஒரு போர்டல் வழியாகக் காட்டப்படும் ஒரு கூறு ரியாக்ட் மரத்தில் அதன் நிலையைத் தக்க வைத்துக் கொள்கிறது. இதன் பொருள் அது இன்னும் சூழலை அணுகலாம், ப்ராப்ஸைப் பெறலாம் மற்றும் ஒரு வழக்கமான குழந்தையாக இருந்தால் அதே நிலை நிர்வாகத்தில் பங்கேற்கலாம், இது தரவு ஓட்டத்தை எளிதாக்குகிறது.
• மேம்படுத்தப்பட்ட அணுகல்தன்மை: அணுகக்கூடிய UI-களை உருவாக்குவதில் போர்டல்கள் கருவியாக இருக்க முடியும். உதாரணமாக, ஒரு மோடல் நேரடியாக document.body இல் காட்டப்படலாம், இது ஃபோகஸ் ட்ராப்பிங்கை நிர்வகிப்பதை எளிதாக்குகிறது மற்றும் ஸ்கிரீன் ரீடர்கள் உள்ளடக்கத்தை ஒரு உயர் மட்ட உரையாடலாக சரியாக விளக்குவதை உறுதி செய்கிறது.
• உலகளாவிய நிலைத்தன்மை: உலகளாவிய பார்வையாளர்களுக்கு சேவை செய்யும் பயன்பாடுகளுக்கு, நிலையான UI நடத்தை இன்றியமையாதது. போர்டல்கள் டெவலப்பர்களுக்கு ஒரு பயன்பாட்டின் பல்வேறு பகுதிகளில் நிலையான UI வடிவங்களை (நிலையான மோடல் நடத்தை போன்றவை) செயல்படுத்துவதை சாத்தியமாக்குகின்றன, இது அடுக்கடுக்கான CSS சிக்கல்கள் அல்லது DOM படிநிலை முரண்பாடுகளுடன் போராடாமல் செய்கிறது.

ஒரு பொதுவான அமைப்பில் உங்கள் index.html இல் ஒரு பிரத்யேக DOM முனையை உருவாக்குவது (எ.கா., <div id="modal-root"></div>) பின்னர் `ReactDOM.createPortal` ஐப் பயன்படுத்தி அதில் உள்ளடக்கத்தைக் காண்பிப்பது அடங்கும். உதாரணமாக:

// public/index.html
<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>

// MyModal.js
import React from 'react';
import ReactDOM from 'react-dom';

const portalRoot = document.getElementById('portal-root');

const MyModal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    portalRoot
  );
};

export default MyModal;

நிகழ்வு கையாளுதல் குழப்பம்: DOM மற்றும் ரியாக்ட் மரங்கள் வேறுபடும்போது

ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பு ஒரு அருமையான சுருக்கம். இது உலாவி நிகழ்வுகளை இயல்பாக்குகிறது, வெவ்வேறு சூழல்களில் நிகழ்வு கையாளுதலை நிலையானதாக ஆக்குகிறது மற்றும் `document` மட்டத்தில் ஒப்படைப்பு மூலம் நிகழ்வு கேட்பவர்களை திறமையாக நிர்வகிக்கிறது. நீங்கள் ஒரு ரியாக்ட் உறுப்புக்கு `onClick` கையாளுதலை இணைக்கும்போது, ரியாக்ட் அந்த குறிப்பிட்ட DOM முனைக்கு நேரடியாக ஒரு நிகழ்வு கேட்பவரைச் சேர்க்காது. பதிலாக, அது அந்த நிகழ்வு வகைக்கு (எ.கா., `click`) ஒரு ஒற்றை கேட்பவரை `document` அல்லது உங்கள் ரியாக்ட் பயன்பாட்டின் மூலத்தில் இணைக்கிறது.

ஒரு உண்மையான உலாவி நிகழ்வு நிகழும்போது (எ.கா., ஒரு கிளிக்), அது இயல்பான DOM மரம் வழியாக `document` க்கு மேலே செல்கிறது. ரியாக்ட் இந்த நிகழ்வை இடைமறித்து, அதன் செயற்கை நிகழ்வு பொருளில் அதை மூடி, பின்னர் அதை பொருத்தமான ரியாக்ட் கூறுகளுக்கு மீண்டும் அனுப்புகிறது, ரியாக்ட் கூறு மரம் வழியாக பப்ளிங்கை உருவகப்படுத்துகிறது. இந்த அமைப்பு நிலையான DOM படிநிலைக்குள் காட்டப்படும் கூறுகளுக்கு நம்பமுடியாத அளவிற்கு நன்றாக வேலை செய்கிறது.

போர்டலின் தனித்தன்மை: DOM இல் ஒரு மாற்றுப்பாதை

போர்டல்களுடன் உள்ள சவால் இங்கே உள்ளது: ஒரு போர்டல் வழியாகக் காட்டப்படும் ஒரு உறுப்பு தர்க்கரீதியாக அதன் ரியாக்ட் தாயின் குழந்தையாக இருந்தாலும், DOM மரத்தில் அதன் பௌதீக இருப்பிடம் முற்றிலும் வேறுபட்டதாக இருக்கலாம். உங்கள் முக்கிய பயன்பாடு <div id="root"></div> இல் ஏற்றப்பட்டு, உங்கள் போர்டல் உள்ளடக்கம் <div id="portal-root"></div> (`root` இன் உடன்பிறப்பு) இல் காட்டப்பட்டால், போர்டலுக்குள் இருந்து உருவாகும் ஒரு கிளிக் நிகழ்வு அதன் *சொந்த* இயல்பான DOM பாதையில் மேலே சென்று, இறுதியில் `document.body` ஐயும் பின்னர் `document` ஐயும் அடையும். அது `div#root` இல் உள்ள போர்டலின் *தர்க்கரீதியான* தாயின் முன்னோர்களுக்கு இணைக்கப்பட்ட நிகழ்வு கேட்பவர்களை அடைய `div#root` வழியாக இயல்பாக மேலே செல்லாது.

இந்த வேறுபாடு, நீங்கள் அதன் எல்லா குழந்தைகளிலிருந்தும் நிகழ்வுகளைப் பிடிக்கும் எதிர்பார்ப்பில் ஒரு தாய் உறுப்பில் ஒரு கிளிக் கையாளுதலை வைக்கும் பாரம்பரிய நிகழ்வு கையாளுதல் வடிவங்கள், அந்தக் குழந்தைகள் ஒரு போர்டலில் காட்டப்படும்போது தோல்வியடையலாம் அல்லது எதிர்பாராத விதமாக நடந்து கொள்ளலாம் என்பதாகும். உதாரணமாக, உங்கள் முக்கிய `App` கூறில் ஒரு `onClick` கேட்பவருடன் ஒரு `div` இருந்தால், அந்த `div` இன் தர்க்கரீதியான குழந்தையாக இருக்கும் ஒரு போர்டலுக்குள் ஒரு பட்டனைக் காட்டினால், அந்த பட்டனைக் கிளிக் செய்வது அந்த `div` இன் `onClick` கையாளுதலை இயல்பான DOM பப்ளிங் வழியாகத் தூண்டாது.

இருப்பினும், இது ஒரு முக்கியமான வேறுபாடு: ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பு இந்த இடைவெளியை இணைக்கிறது. ஒரு இயல்பான நிகழ்வு ஒரு போர்டலில் இருந்து உருவாகும்போது, ரியாக்ட்டின் உள் பொறிமுறையானது செயற்கை நிகழ்வு இன்னும் ரியாக்ட் கூறு மரம் வழியாக தர்க்கரீதியான தாய்க்கு மேலே செல்வதை உறுதி செய்கிறது. இதன் பொருள், ஒரு போர்டலை தர்க்கரீதியாகக் கொண்டிருக்கும் ஒரு ரியாக்ட் கூறில் நீங்கள் ஒரு `onClick` கையாளுதலைக் கொண்டிருந்தால், போர்டலுக்குள் ஒரு கிளிக் அந்த கையாளுதலைத் *தூண்டும்*. இது ரியாக்ட்டின் நிகழ்வு அமைப்பின் ஒரு அடிப்படை அம்சமாகும், இது போர்டல்களுடன் நிகழ்வு ஒப்படைப்பை சாத்தியமாக்குவது மட்டுமல்லாமல், பரிந்துரைக்கப்பட்ட அணுகுமுறையாகவும் ஆக்குகிறது.

தீர்வு: நிகழ்வு ஒப்படைப்பு விரிவாக

நிகழ்வு ஒப்படைப்பு என்பது பல சந்ததி உறுப்புகளுக்கு தனிப்பட்ட கேட்பவர்களை இணைப்பதற்குப் பதிலாக, ஒரு பொதுவான மூதாதையர் உறுப்புக்கு ஒரு ஒற்றை நிகழ்வு கேட்பவரை இணைக்கும் நிகழ்வுகளைக் கையாள்வதற்கான ஒரு வடிவமைப்பு முறை ஆகும். ஒரு சந்ததி மீது ஒரு நிகழ்வு (கிளிக் போன்றவை) நிகழும்போது, அது ஒப்படைக்கப்பட்ட கேட்பவருடன் மூதாதையரை அடையும் வரை DOM மரம் வழியாக மேலே செல்கிறது. கேட்பவர் பின்னர் `event.target` பண்பைப் பயன்படுத்தி நிகழ்வு உருவான குறிப்பிட்ட உறுப்பைக் கண்டறிந்து அதற்கேற்ப செயல்படுகிறார்.

நிகழ்வு ஒப்படைப்பின் முக்கிய நன்மைகள்

• செயல்திறன் மேம்படுத்தல்: பல நிகழ்வு கேட்பவர்களுக்குப் பதிலாக, உங்களிடம் ஒன்று மட்டுமே உள்ளது. இது நினைவக நுகர்வு மற்றும் அமைவு நேரத்தைக் குறைக்கிறது, குறிப்பாக பல ஊடாடும் கூறுகளைக் கொண்ட சிக்கலான UI-களுக்கு அல்லது வளத் திறன் மிக முக்கியமான உலகளவில் பயன்படுத்தப்படும் பயன்பாடுகளுக்கு நன்மை பயக்கும்.
• டைனமிக் உள்ளடக்க கையாளுதல்: ஆரம்ப ரெண்டருக்குப் பிறகு DOM-ல் சேர்க்கப்படும் கூறுகள் (எ.கா., AJAX கோரிக்கைகள் அல்லது பயனர் தொடர்புகள் மூலம்) புதிய கேட்பவர்களை இணைக்கத் தேவையில்லாமல் ஒப்படைக்கப்பட்ட கேட்பவர்களிடமிருந்து தானாகவே பயனடைகின்றன. இது டைனமிக்காக ரெண்டர் செய்யப்படும் போர்டல் உள்ளடக்கத்திற்கு மிகவும் பொருத்தமானது.
• தூய்மையான குறியீடு: நிகழ்வு தர்க்கத்தை மையப்படுத்துவது உங்கள் குறியீட்டுத் தளத்தை மேலும் ஒழுங்கமைக்கப்பட்டதாகவும் பராமரிக்க எளிதாகவும் ஆக்குகிறது.
• DOM கட்டமைப்புகள் முழுவதும் வலிமை: நாம் விவாதித்தபடி, ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பு, ஒரு போர்டலின் உள்ளடக்கத்திலிருந்து உருவாகும் நிகழ்வுகள் *இன்னும்* ரியாக்ட் கூறு மரம் வழியாக அவற்றின் தர்க்கரீதியான மூதாதையர்களுக்கு மேலே செல்வதை உறுதி செய்கிறது. இதுவே, போர்டல்களின் பௌதீக DOM இருப்பிடம் வேறுபட்டாலும், நிகழ்வு ஒப்படைப்பை ஒரு பயனுள்ள உத்தியாக மாற்றும் அடித்தளமாகும்.

நிகழ்வு பப்ளிங் மற்றும் கேப்சர் விளக்கப்பட்டது

நிகழ்வு ஒப்படைப்பை முழுமையாகப் புரிந்துகொள்ள, DOM-ல் நிகழ்வு பரவலின் இரண்டு கட்டங்களைப் புரிந்துகொள்வது முக்கியம்:

1. கேப்சரிங் கட்டம் (கீழ்நோக்கிச் செல்லுதல்): நிகழ்வு `document` மூலத்தில் தொடங்கி, இலக்கு உறுப்பை அடையும் வரை DOM மரம் வழியாகக் கீழே பயணிக்கிறது, ஒவ்வொரு மூதாதையர் உறுப்பையும் சந்திக்கிறது. `useCapture = true` உடன் பதிவுசெய்யப்பட்ட கேட்பவர்கள் (அல்லது ரியாக்ட்டில், `Capture` பின்னொட்டைச் சேர்ப்பதன் மூலம், எ.கா., `onClickCapture`) இந்தக் கட்டத்தில் தூண்டப்படும்.
2. பப்ளிங் கட்டம் (மேல்நோக்கிச் செல்லுதல்): இலக்கு உறுப்பை அடைந்த பிறகு, நிகழ்வு DOM மரம் வழியாக மீண்டும் மேலே பயணிக்கிறது, இலக்கு உறுப்பிலிருந்து `document` மூலம் வரை, ஒவ்வொரு மூதாதையர் உறுப்பையும் சந்திக்கிறது. பெரும்பாலான நிகழ்வு கேட்பவர்கள், அனைத்து நிலையான ரியாக்ட் `onClick`, `onChange` போன்றவை உட்பட, இந்தக் கட்டத்தில் தூண்டப்படும்.

ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பு முதன்மையாக பப்ளிங் கட்டத்தை நம்பியுள்ளது. ஒரு போர்டலுக்குள் ஒரு உறுப்பில் ஒரு நிகழ்வு நிகழும்போது, இயல்பான உலாவி நிகழ்வு அதன் பௌதீக DOM பாதையில் மேலே செல்கிறது. ரியாக்ட்டின் ரூட் கேட்பவர் (வழக்கமாக `document` இல்) இந்த இயல்பான நிகழ்வைப் பிடிக்கிறார். முக்கியமாக, ரியாக்ட் பின்னர் நிகழ்வை மீண்டும் உருவாக்கி அதன் *செயற்கை* இணையை அனுப்புகிறது, இது போர்டலுக்குள் உள்ள கூறிலிருந்து அதன் தர்க்கரீதியான தாய் கூறுக்கு *ரியாக்ட் கூறு மரம் வழியாக பப்ளிங்கை உருவகப்படுத்துகிறது*. இந்த புத்திசாலித்தனமான சுருக்கம், அவற்றின் தனி பௌதீக DOM இருப்பு இருந்தபோதிலும், நிகழ்வு ஒப்படைப்பு போர்டல்களுடன் தடையின்றி செயல்படுவதை உறுதி செய்கிறது.

ரியாக்ட் போர்டல்களுடன் நிகழ்வு ஒப்படைப்பை செயல்படுத்துதல்

ஒரு பொதுவான சூழ்நிலையைப் பார்ப்போம்: ஒரு பயனர் அதன் உள்ளடக்கப் பகுதிக்கு வெளியே (பின்னணியில்) கிளிக் செய்யும்போது அல்லது `Escape` விசையை அழுத்தும்போது மூடப்படும் ஒரு மோடல் உரையாடல். இது போர்டல்களுக்கான ஒரு உன்னதமான பயன்பாட்டு வழக்கு மற்றும் நிகழ்வு ஒப்படைப்பின் ஒரு சிறந்த செயல்விளக்கம்.

காட்சி: வெளியே கிளிக் செய்தால் மூடும் மோடல்

ஒரு ரியாக்ட் போர்டலைப் பயன்படுத்தி ஒரு மோடல் கூறினை செயல்படுத்த விரும்புகிறோம். ஒரு பட்டன் கிளிக் செய்யப்படும்போது மோடல் தோன்ற வேண்டும், மேலும் அது மூடப்பட வேண்டும்:

• பயனர் மோடல் உள்ளடக்கத்தைச் சுற்றியுள்ள அரை-தெளிவான ஓவர்லே (பின்னணி) மீது கிளிக் செய்யும்போது.
• பயனர் `Escape` விசையை அழுத்தும்போது.
• பயனர் மோடலுக்குள் உள்ள ஒரு வெளிப்படையான "மூடு" பட்டனைக் கிளிக் செய்யும்போது.

படிப்படியான செயலாக்கம்

படி 1: HTML மற்றும் போர்டல் கூறினைத் தயார் செய்தல்

உங்கள் `index.html` இல் போர்டல்களுக்கு ஒரு பிரத்யேக ரூட் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். இந்த எடுத்துக்காட்டிற்கு, `id="portal-root"` ஐப் பயன்படுத்துவோம்.

// public/index.html (snippet)
<body>
  <div id="root"></div>
  <div id="portal-root"></div> <!-- Our portal target -->
</body>

அடுத்து, `ReactDOM.createPortal` தர்க்கத்தை உள்ளடக்குவதற்கு ஒரு எளிய `Portal` கூறினை உருவாக்குங்கள். இது நமது மோடல் கூறினை தூய்மையாக்குகிறது.

// components/Portal.js
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

interface PortalProps {
  children: React.ReactNode;
  wrapperId?: string;
}

// We'll create a div for the portal if one doesn't already exist for the wrapperId
function createWrapperAndAppendToBody(wrapperId: string) {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
}

function Portal({ children, wrapperId = 'portal-wrapper' }: PortalProps) {
  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId) as HTMLElement;
    let created = false;

    if (!element) {
      created = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Clean up the element if we created it
      if (created && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  // wrapperElement will be null on first render. This is fine because we'll render nothing.
  if (!wrapperElement) return null;

  return createPortal(children, wrapperElement);
}

export default Portal;

குறிப்பு: எளிமைக்காக, `portal-root` முந்தைய எடுத்துக்காட்டுகளில் `index.html` இல் ஹார்ட்கோட் செய்யப்பட்டது. இந்த `Portal.js` கூறு ஒரு டைனமிக் அணுகுமுறையை வழங்குகிறது, ஒரு ராப்பர் div இல்லை என்றால் ஒன்றை உருவாக்குகிறது. உங்கள் திட்டத்தின் தேவைகளுக்கு மிகவும் பொருத்தமான முறையைத் தேர்வு செய்யவும். நாங்கள் `Modal` கூறுக்கு `index.html` இல் குறிப்பிடப்பட்ட `portal-root` ஐப் பயன்படுத்தி தொடர்வோம், ஆனால் மேலே உள்ள `Portal.js` ஒரு வலுவான மாற்று ஆகும்.

படி 2: மோடல் கூறினை உருவாக்குதல்

நமது `Modal` கூறு அதன் உள்ளடக்கத்தை `children` ஆகவும் ஒரு `onClose` கால்பேக்கையும் பெறும்.

// components/Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const modalRoot = document.getElementById('portal-root') as HTMLElement;

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);

  if (!isOpen) return null;

  // Handle Escape key press
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    document.addEventListener('keydown', handleEscape);
    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [onClose]);

  // The key to event delegation: a single click handler on the backdrop.
  // It also implicitly delegates to the close button inside the modal.
  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
    // Check if the click target is the backdrop itself, not content within the modal.
    // Using `modalContentRef.current.contains(event.target)` is crucial here.
    // event.target is the element that originated the click.
    // event.currentTarget is the element where the event listener is attached (modal-overlay).
    if (modalContentRef.current && !modalContentRef.current.contains(event.target as Node)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        {children}
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

படி 3: முக்கிய பயன்பாட்டு கூறில் ஒருங்கிணைத்தல்

நமது முக்கிய `App` கூறு மோடலின் திறந்த/மூடிய நிலையை நிர்வகித்து `Modal` ஐ ரெண்டர் செய்யும்.

// App.js
import React, { useState } from 'react';
import Modal from './components/Modal';
import './App.css'; // For basic styling

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div className="App">
      <h1>React Portal Event Delegation Example</h1>
      <p>Demonstrating event handling across different DOM trees.</p>

      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Welcome to the Modal!</h2>
        <p>This content is rendered in a React Portal, outside the main application's DOM hierarchy.</p>
        <button onClick={closeModal}>Close from inside</button>
      </Modal>

      <p>Some other content behind the modal.</p>
      <p>Another paragraph to show the background.</p>
    </div>
  );
}

export default App;

படி 4: அடிப்படை ஸ்டைலிங் (App.css)

மோடல் மற்றும் அதன் பின்னணியை காட்சிப்படுத்த.

/* App.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 80%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative; /* Needed for internal button positioning if any */
}

.modal-content button {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.modal-content button:hover {
  background-color: #0056b3;
}

.modal-content > button:last-child { /* Style for the 'X' close button */
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    border: none;
}

.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}

.App button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.App button:hover {
  background-color: #218838;
}

ஒப்படைப்பு தர்க்கத்தின் விளக்கம்

நமது `Modal` கூறில், `onClick={handleBackdropClick}` ஆனது `.modal-overlay` div உடன் இணைக்கப்பட்டுள்ளது, இது நமது ஒப்படைக்கப்பட்ட கேட்பவராக செயல்படுகிறது. இந்த ஓவர்லேக்குள் (இதில் `modal-content` மற்றும் அதனுள் உள்ள `X` மூடும் பட்டன், மற்றும் 'உள்ளிருந்து மூடு' பட்டன் ஆகியவை அடங்கும்) எந்தவொரு கிளிக் நிகழ்ந்தாலும், `handleBackdropClick` செயல்பாடு செயல்படுத்தப்படும்.

`handleBackdropClick` க்குள்:

• `event.target` என்பது *உண்மையில் கிளிக் செய்யப்பட்ட* குறிப்பிட்ட DOM உறுப்பைக் குறிக்கிறது (எ.கா., `modal-content` க்குள் உள்ள `<h2>`, `<p>`, அல்லது ஒரு `<button>`, அல்லது `modal-overlay` தானே).
• `event.currentTarget` என்பது நிகழ்வு கேட்பவர் இணைக்கப்பட்ட உறுப்பைக் குறிக்கிறது, இது இந்த வழக்கில் `.modal-overlay` div ஆகும்.
• `!modalContentRef.current.contains(event.target as Node)` என்ற நிபந்தனை நமது ஒப்படைப்பின் இதயமாகும். இது கிளிக் செய்யப்பட்ட உறுப்பு (`event.target`) `modal-content` div இன் சந்ததி *இல்லை* என்பதை சரிபார்க்கிறது. `event.target` ஆனது `.modal-overlay` ஆகவோ அல்லது ஓவர்லேயின் உடனடி குழந்தையாக இருக்கும் ஆனால் `modal-content` இன் பகுதியாக இல்லாத வேறு எந்த உறுப்பாகவோ இருந்தால், `contains` ஆனது `false` ஐ வழங்கும், மற்றும் மோடல் மூடப்படும்.
• முக்கியமாக, ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பு, `event.target` ஆனது `portal-root` இல் பௌதீக ரீதியாக ரெண்டர் செய்யப்பட்ட ஒரு உறுப்பாக இருந்தாலும், தர்க்கரீதியான தாயின் (`Modal` கூறில் உள்ள `.modal-overlay`) `onClick` கையாளுதல் இன்னும் தூண்டப்படும் என்பதை உறுதி செய்கிறது, மற்றும் `event.target` ஆனது ஆழமாக உள்ள உறுப்பை சரியாக அடையாளம் காணும்.

உள் மூடும் பட்டன்களுக்கு, அவற்றின் `onClick` கையாளுதல்களில் நேரடியாக `onClose()` ஐ அழைப்பது வேலை செய்கிறது, ஏனெனில் இந்த கையாளுதல்கள் நிகழ்வு `modal-overlay` இன் ஒப்படைக்கப்பட்ட கேட்பவருக்கு மேலே செல்வதற்கு *முன்பு* செயல்படுத்தப்படுகின்றன, அல்லது அவை வெளிப்படையாக கையாளப்படுகின்றன. அவை மேலே சென்றாலும், நமது `contains()` சரிபார்ப்பு, கிளிக் உள்ளடக்கத்தின் உள்ளிருந்து உருவானால் மோடல் மூடுவதைத் தடுக்கும்.

`Escape` விசை கேட்பவருக்கான `useEffect` நேரடியாக `document` உடன் இணைக்கப்பட்டுள்ளது, இது உலகளாவிய விசைப்பலகை குறுக்குவழிகளுக்கான ஒரு பொதுவான மற்றும் பயனுள்ள வடிவமாகும், ஏனெனில் இது கூறு ஃபோகஸைப் பொருட்படுத்தாமல் கேட்பவர் செயலில் இருப்பதை உறுதி செய்கிறது, மேலும் இது போர்டல்களுக்குள் இருந்து உருவாகும் நிகழ்வுகள் உட்பட DOM இல் எங்கிருந்தும் நிகழ்வுகளைப் பிடிக்கும்.

பொதுவான நிகழ்வு ஒப்படைப்பு சூழ்நிலைகளை நிவர்த்தி செய்தல்

தேவையற்ற நிகழ்வு பரவலைத் தடுத்தல்: `event.stopPropagation()`

சில நேரங்களில், ஒப்படைப்புடன் கூட, உங்கள் ஒப்படைக்கப்பட்ட பகுதிக்குள் குறிப்பிட்ட கூறுகள் இருக்கலாம், அங்கு நீங்கள் ஒரு நிகழ்வை மேலும் மேலே செல்வதை வெளிப்படையாக நிறுத்த விரும்பலாம். உதாரணமாக, உங்கள் மோடல் உள்ளடக்கத்திற்குள் ஒரு உள்ளமைக்கப்பட்ட ஊடாடும் உறுப்பு இருந்தால், அது கிளிக் செய்யப்படும்போது, `onClose` தர்க்கத்தைத் தூண்டக் *கூடாது* (`contains` சரிபார்ப்பு ஏற்கனவே அதை கையாண்டாலும்), நீங்கள் `event.stopPropagation()` ஐப் பயன்படுத்தலாம்.

<div className="modal-content" ref={modalContentRef}>
  <h2>Modal Content</h2>
  <p>Clicking this area will not close the modal.</p>
  <button onClick={(e) => {
    e.stopPropagation(); // Prevent this click from bubbling to the backdrop
    console.log('Inner button clicked!');
  }}>Inner Action Button</button>
  <button onClick={onClose}>Close</button>
</div>

`event.stopPropagation()` பயனுள்ளதாக இருந்தாலும், அதை நிதானமாகப் பயன்படுத்துங்கள். அதிகப்படியான பயன்பாடு நிகழ்வு ஓட்டத்தை கணிக்க முடியாததாகவும், பிழைத்திருத்தத்தை கடினமாகவும் ஆக்கும், குறிப்பாக பெரிய, உலகளவில் விநியோகிக்கப்பட்ட பயன்பாடுகளில் வெவ்வேறு குழுக்கள் UI-க்கு பங்களிக்கக்கூடும்.

ஒப்படைப்புடன் குறிப்பிட்ட குழந்தை கூறுகளை கையாளுதல்

ஒரு கிளிக் உள்ளே அல்லது வெளியே உள்ளதா என்பதைச் சரிபார்ப்பதைத் தாண்டி, ஒப்படைக்கப்பட்ட பகுதிக்குள் பல்வேறு வகையான கிளிக்குகளை வேறுபடுத்தி அறிய நிகழ்வு ஒப்படைப்பு உங்களை அனுமதிக்கிறது. நீங்கள் `event.target.tagName`, `event.target.id`, `event.target.className`, அல்லது `event.target.dataset` பண்புக்கூறுகள் போன்ற பண்புகளைப் பயன்படுத்தி வெவ்வேறு செயல்களைச் செய்யலாம்.

const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
  if (modalContentRef.current && modalContentRef.current.contains(event.target as Node)) {
    // Click was inside modal content
    const clickedElement = event.target as HTMLElement;

    if (clickedElement.tagName === 'BUTTON' && clickedElement.dataset.action === 'confirm') {
      console.log('Confirm action triggered!');
      onClose();
    } else if (clickedElement.tagName === 'A') {
      console.log('Link inside modal clicked:', clickedElement.href);
      // Potentially prevent default behavior or navigate programmatically
    }
    // Other specific handlers for elements inside the modal
  } else {
    // Click was outside modal content (on backdrop)
    onClose();
  }
};

இந்த முறை உங்கள் போர்டல் உள்ளடக்கத்திற்குள் பல ஊடாடும் கூறுகளை ஒரு ஒற்றை, திறமையான நிகழ்வு கேட்பவரைப் பயன்படுத்தி நிர்வகிக்க ஒரு சக்திவாய்ந்த வழியை வழங்குகிறது.

எப்போது ஒப்படைக்கக்கூடாது

போர்டல்களுக்கு நிகழ்வு ஒப்படைப்பு மிகவும் பரிந்துரைக்கப்பட்டாலும், உறுப்பு மீதே நேரடி நிகழ்வு கேட்பவர்கள் மிகவும் பொருத்தமானதாக இருக்கும் சூழ்நிலைகள் உள்ளன:

• மிகவும் குறிப்பிட்ட கூறு நடத்தை: ஒரு கூறு மிகவும் சிறப்பு வாய்ந்த, தன்னிறைவான நிகழ்வு தர்க்கத்தைக் கொண்டிருந்தால், அதன் மூதாதையர்களின் ஒப்படைக்கப்பட்ட கையாளுதல்களுடன் தொடர்பு கொள்ளத் தேவையில்லை.
• `onChange` உடன் உள்ளீட்டு கூறுகள்: உரை உள்ளீடுகள் போன்ற கட்டுப்படுத்தப்பட்ட கூறுகளுக்கு, `onChange` கேட்பவர்கள் உடனடி நிலை புதுப்பிப்புகளுக்காக பொதுவாக உள்ளீட்டு உறுப்பு மீதே வைக்கப்படுகிறார்கள். இந்த நிகழ்வுகளும் பப்ளிங் செய்தாலும், அவற்றை நேரடியாகக் கையாள்வது நிலையான நடைமுறையாகும்.
• செயல்திறன்-முக்கியமான, உயர்-அதிர்வெண் நிகழ்வுகள்: `mousemove` அல்லது `scroll` போன்ற மிக அடிக்கடி நிகழும் நிகழ்வுகளுக்கு, ஒரு தொலைதூர மூதாதையருக்கு ஒப்படைப்பது `event.target` ஐ மீண்டும் மீண்டும் சரிபார்க்கும் ஒரு சிறிய மேல்நிலையை அறிமுகப்படுத்தலாம். இருப்பினும், பெரும்பாலான UI தொடர்புகளுக்கு (கிளிக்குகள், கீடவுன்கள்), ஒப்படைப்பின் நன்மைகள் இந்த குறைந்தபட்ச செலவை விட அதிகமாகும்.

மேம்பட்ட வடிவங்கள் மற்றும் பரிசீலனைகள்

மிகவும் சிக்கலான பயன்பாடுகளுக்கு, குறிப்பாக பல்வேறு உலகளாவிய பயனர் தளங்களுக்கு சேவை செய்பவர்களுக்கு, போர்டல்களுக்குள் நிகழ்வு கையாளுதலை நிர்வகிக்க மேம்பட்ட வடிவங்களைக் கருத்தில் கொள்ளலாம்.

தனிப்பயன் நிகழ்வு அனுப்புதல்

ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பு உங்கள் தேவைகளுடன் சரியாகப் பொருந்தாத மிகவும் குறிப்பிட்ட விளிம்பு வழக்குகளில் (இது அரிது), நீங்கள் கைமுறையாக தனிப்பயன் நிகழ்வுகளை அனுப்பலாம். இது ஒரு `CustomEvent` பொருளை உருவாக்கி அதை ஒரு இலக்கு உறுப்பிலிருந்து அனுப்புவதை உள்ளடக்கியது. இருப்பினும், இது பெரும்பாலும் ரியாக்ட்டின் மேம்படுத்தப்பட்ட நிகழ்வு அமைப்பைத் தவிர்க்கிறது மற்றும் எச்சரிக்கையுடன் மற்றும் கண்டிப்பாகத் தேவைப்படும்போது மட்டுமே பயன்படுத்தப்பட வேண்டும், ஏனெனில் இது பராமரிப்பு சிக்கலை அறிமுகப்படுத்தலாம்.

// Inside a Portal component
const handleCustomAction = () => {
  const event = new CustomEvent('my-custom-portal-event', { detail: { data: 'some info' }, bubbles: true });
  document.dispatchEvent(event);
};

// Somewhere in your main app, e.g., in an effect hook
useEffect(() => {
  const handler = (event: Event) => {
    if (event instanceof CustomEvent) {
      console.log('Custom event received:', event.detail);
    }
  };
  document.addEventListener('my-custom-portal-event', handler);
  return () => document.removeEventListener('my-custom-portal-event', handler);
}, []);

இந்த அணுகுமுறை சிறுமணி கட்டுப்பாட்டை வழங்குகிறது ஆனால் நிகழ்வு வகைகள் மற்றும் பேலோடுகளின் கவனமான மேலாண்மை தேவைப்படுகிறது.

நிகழ்வு கையாளுதல்களுக்கான Context API

ஆழமாக உள்ளமைக்கப்பட்ட போர்டல் உள்ளடக்கத்துடன் கூடிய பெரிய பயன்பாடுகளுக்கு, `onClose` அல்லது பிற கையாளுதல்களை ப்ராப்ஸ் மூலம் அனுப்புவது ப்ராப் டிரில்லிங்கிற்கு வழிவகுக்கும். ரியாக்ட்டின் Context API ஒரு நேர்த்தியான தீர்வை வழங்குகிறது:

// context/ModalContext.js
import React, { createContext, useContext } from 'react';

interface ModalContextType {
  onClose?: () => void;
  // Add other modal-related handlers as needed
}

const ModalContext = createContext<ModalContextType>({});

export const useModal = () => useContext(ModalContext);

export const ModalProvider = ({ children, onClose }: ModalContextType & React.PropsWithChildren) => (
  <ModalContext.Provider value={{ onClose }}>
    {children}
  </ModalContext.Provider>
);

// components/Modal.js (updated to use Context)
// ... (imports and modalRoot defined)

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);
  // ... (useEffect for Escape key, handleBackdropClick remains largely the same)

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        <ModalProvider onClose={onClose}>{children}</ModalProvider> <!-- Provide context -->
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

// components/DeeplyNestedComponent.js (somewhere inside modal children)
import React from 'react';
import { useModal } from '../context/ModalContext';

const DeeplyNestedComponent = () => {
  const { onClose } = useModal();

  return (
    <div>
      <p>This component is deep inside the modal.</p>
      {onClose && <button onClick={onClose}>Close from Deep Nest</button>}
    </div>
  );
};

Context API ஐப் பயன்படுத்துவது கையாளுதல்களை (அல்லது வேறு எந்த தொடர்புடைய தரவையும்) கூறு மரம் வழியாக போர்டல் உள்ளடக்கத்திற்கு அனுப்ப ஒரு தூய்மையான வழியை வழங்குகிறது, கூறு இடைமுகங்களை எளிதாக்குகிறது மற்றும் பராமரிப்பை மேம்படுத்துகிறது, குறிப்பாக சிக்கலான UI அமைப்புகளில் ஒத்துழைக்கும் சர்வதேச குழுக்களுக்கு.

செயல்திறன் தாக்கங்கள்

நிகழ்வு ஒப்படைப்பு தானே ஒரு செயல்திறன் ஊக்கியாக இருந்தாலும், உங்கள் `handleBackdropClick` அல்லது ஒப்படைக்கப்பட்ட தர்க்கத்தின் சிக்கலான தன்மையைக் கவனத்தில் கொள்ளுங்கள். ஒவ்வொரு கிளிக்கிலும் நீங்கள் விலையுயர்ந்த DOM பயணங்கள் அல்லது கணக்கீடுகளைச் செய்கிறீர்கள் என்றால், அது செயல்திறனைப் பாதிக்கலாம். உங்கள் சோதனைகளை (எ.கா., `event.target.closest()`, `element.contains()`) முடிந்தவரை திறமையாக மேம்படுத்தவும். மிக அதிக அதிர்வெண் நிகழ்வுகளுக்கு, தேவைப்பட்டால் டிபவுன்சிங் அல்லது த்ராட்லிங்கைக் கருத்தில் கொள்ளுங்கள், இருப்பினும் இது மோடல்களில் எளிய கிளிக்/கீடவுன் நிகழ்வுகளுக்கு குறைவாகவே நிகழ்கிறது.

உலகளாவிய பார்வையாளர்களுக்கான அணுகல்தன்மை (A11y) பரிசீலனைகள்

அணுகல்தன்மை ஒரு பின்தங்கிய சிந்தனை அல்ல; அது ஒரு அடிப்படைத் தேவை, குறிப்பாக பல்வேறு தேவைகள் மற்றும் உதவித் தொழில்நுட்பங்களைக் கொண்ட உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது. மோடல்கள் அல்லது ஒத்த ஓவர்லேகளுக்கு போர்டல்களைப் பயன்படுத்தும்போது, நிகழ்வு கையாளுதல் அணுகல்தன்மையில் ஒரு முக்கியப் பங்கு வகிக்கிறது:

• ஃபோகஸ் மேலாண்மை: ஒரு மோடல் திறக்கும்போது, ஃபோகஸ் நிரல்ரீதியாக மோடலுக்குள் உள்ள முதல் ஊடாடும் உறுப்புக்கு நகர்த்தப்பட வேண்டும். மோடல் மூடப்படும்போது, ஃபோகஸ் அதைத் தூண்டிய உறுப்புக்குத் திரும்ப வேண்டும். இது பெரும்பாலும் `useEffect` மற்றும் `useRef` உடன் கையாளப்படுகிறது.
• விசைப்பலகை தொடர்பு: `Escape` விசை மூடும் செயல்பாடு (காட்டப்பட்டது போல) ஒரு முக்கியமான அணுகல்தன்மை வடிவமாகும். மோடலுக்குள் உள்ள அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகை-வழிசெலுத்தக்கூடியவை (`Tab` விசை) என்பதை உறுதிப்படுத்தவும்.
• ARIA பண்புக்கூறுகள்: பொருத்தமான ARIA பாத்திரங்கள் மற்றும் பண்புக்கூறுகளைப் பயன்படுத்தவும். மோடல்களுக்கு, `role="dialog"` அல்லது `role="alertdialog"`, `aria-modal="true"`, மற்றும் `aria-labelledby` அல்லது `aria-describedby` ஆகியவை அவசியமானவை. இந்த பண்புக்கூறுகள் ஸ்கிரீன் ரீடர்களுக்கு மோடலின் இருப்பை அறிவிக்கவும் அதன் நோக்கத்தை விவரிக்கவும் உதவுகின்றன.
• ஃபோகஸ் ட்ராப்பிங்: மோடலுக்குள் ஃபோகஸ் ட்ராப்பிங்கைச் செயல்படுத்தவும். ஒரு பயனர் `Tab` ஐ அழுத்தும்போது, ஃபோகஸ் மோடலுக்குள் உள்ள கூறுகளில் மட்டுமே சுழல்கிறது, பின்னணி பயன்பாட்டில் உள்ள கூறுகளில் அல்ல என்பதை இது உறுதி செய்கிறது. இது பொதுவாக மோடலில் கூடுதல் `keydown` கையாளுதல்களுடன் அடையப்படுகிறது.

வலுவான அணுகல்தன்மை என்பது இணக்கத்தைப் பற்றியது மட்டுமல்ல; இது உங்கள் பயன்பாட்டின் அணுகலை மாற்றுத்திறனாளிகள் உட்பட ஒரு பரந்த உலகளாவிய பயனர் தளத்திற்கு விரிவுபடுத்துகிறது, அனைவரும் உங்கள் UI உடன் திறம்பட தொடர்பு கொள்ள முடியும் என்பதை உறுதி செய்கிறது.

ரியாக்ட் போர்டல் நிகழ்வு கையாளுதலுக்கான சிறந்த நடைமுறைகள்

சுருக்கமாக, ரியாக்ட் போர்டல்களுடன் நிகழ்வுகளை திறம்பட கையாள்வதற்கான முக்கிய சிறந்த நடைமுறைகள் இங்கே:

• நிகழ்வு ஒப்படைப்பை ஏற்றுக்கொள்ளுங்கள்: ஒரு பொதுவான மூதாதையருக்கு (ஒரு மோடலின் பின்னணி போன்றவை) ஒரு ஒற்றை நிகழ்வு கேட்பவரை இணைப்பதை எப்போதும் விரும்புங்கள் மற்றும் கிளிக் செய்யப்பட்ட உறுப்பைக் கண்டறிய `event.target` ஐ `element.contains()` அல்லது `event.target.closest()` உடன் பயன்படுத்தவும்.
• ரியாக்ட்டின் செயற்கை நிகழ்வுகளைப் புரிந்து கொள்ளுங்கள்: ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பு போர்டல்களிலிருந்து நிகழ்வுகளை அவற்றின் தர்க்கரீதியான ரியாக்ட் கூறு மரம் வழியாக பப்ளிங் செய்ய திறம்பட மறு-இலக்கு வைக்கிறது என்பதை நினைவில் கொள்ளுங்கள், இது ஒப்படைப்பை நம்பகமானதாக ஆக்குகிறது.
• உலகளாவிய கேட்பவர்களை நிதானமாக நிர்வகிக்கவும்: `Escape` விசை அழுத்துதல்கள் போன்ற உலகளாவிய நிகழ்வுகளுக்கு, கேட்பவர்களை ஒரு `useEffect` ஹூக்கிற்குள் நேரடியாக `document` உடன் இணைக்கவும், சரியான சுத்தம் செய்வதை உறுதி செய்யவும்.
• `stopPropagation()` ஐக் குறைக்கவும்: `event.stopPropagation()` ஐ குறைவாகப் பயன்படுத்துங்கள். இது சிக்கலான நிகழ்வு ஓட்டங்களை உருவாக்க முடியும். வெவ்வேறு கிளிக் இலக்குகளை இயல்பாகக் கையாள உங்கள் ஒப்படைப்பு தர்க்கத்தை வடிவமைக்கவும்.
• அணுகல்தன்மைக்கு முன்னுரிமை அளிக்கவும்: ஃபோகஸ் மேலாண்மை, விசைப்பலகை வழிசெலுத்தல் மற்றும் பொருத்தமான ARIA பண்புக்கூறுகள் உட்பட, விரிவான அணுகல்தன்மை அம்சங்களை ஆரம்பத்திலிருந்தே செயல்படுத்தவும்.
• DOM குறிப்புகளுக்கு `useRef` ஐப் பயன்படுத்தவும்: உங்கள் போர்டலுக்குள் உள்ள DOM கூறுகளுக்கு நேரடி குறிப்புகளைப் பெற `useRef` ஐப் பயன்படுத்தவும், இது `element.contains()` சோதனைகளுக்கு முக்கியமானது.
• சிக்கலான ப்ராப்ஸ்களுக்கு Context API ஐக் கருத்தில் கொள்ளுங்கள்: போர்டல்களுக்குள் ஆழமான கூறு மரங்களுக்கு, நிகழ்வு கையாளுதல்கள் அல்லது பிற பகிரப்பட்ட நிலையை அனுப்ப Context API ஐப் பயன்படுத்தவும், ப்ராப் டிரில்லிங்கைக் குறைக்கவும்.
• முழுமையாக சோதிக்கவும்: போர்டல்களின் கிராஸ்-டாம் தன்மையைக் கருத்தில் கொண்டு, பல்வேறு பயனர் தொடர்புகள், உலாவி சூழல்கள் மற்றும் உதவித் தொழில்நுட்பங்களில் நிகழ்வு கையாளுதலை கடுமையாக சோதிக்கவும்.

முடிவுரை

ரியாக்ட் போர்டல்கள் மேம்பட்ட, பார்வைக்கு ஈர்க்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு தவிர்க்க முடியாத கருவியாகும். இருப்பினும், தாய் கூறின் DOM படிநிலைக்கு வெளியே உள்ளடக்கத்தை ரெண்டர் செய்யும் அவற்றின் திறன் நிகழ்வு கையாளுதலுக்கு தனித்துவமான பரிசீலனைகளை அறிமுகப்படுத்துகிறது. ரியாக்ட்டின் செயற்கை நிகழ்வு அமைப்பைப் புரிந்துகொண்டு நிகழ்வு ஒப்படைப்புக் கலையில் தேர்ச்சி பெறுவதன் மூலம், டெவலப்பர்கள் இந்த சவால்களைச் சமாளித்து மிகவும் ஊடாடும், செயல்திறன் மிக்க மற்றும் அணுகக்கூடிய பயன்பாடுகளை உருவாக்க முடியும்.

நிகழ்வு ஒப்படைப்பைச் செயல்படுத்துவது, உங்கள் உலகளாவிய பயன்பாடுகள் அடிப்படை DOM கட்டமைப்பைப் பொருட்படுத்தாமல், ஒரு நிலையான மற்றும் வலுவான பயனர் அனுபவத்தை வழங்குவதை உறுதி செய்கிறது. இது தூய்மையான, மேலும் பராமரிக்கக்கூடிய குறியீட்டிற்கு வழிவகுக்கிறது மற்றும் அளவிடக்கூடிய UI மேம்பாட்டிற்கு வழி வகுக்கிறது. இந்த வடிவங்களை ஏற்றுக்கொள்ளுங்கள், உங்கள் அடுத்த திட்டத்தில் ரியாக்ட் போர்டல்களின் முழு சக்தியையும் பயன்படுத்த நீங்கள் நன்கு தயாராக இருப்பீர்கள், உலகெங்கிலும் உள்ள பயனர்களுக்கு விதிவிலக்கான டிஜிட்டல் அனுபவங்களை வழங்குவீர்கள்.